<template>
    <div class="common-layout">
        <el-container>
            <h1>销售管理</h1>
            <!-- 表单 -->
            <el-header>
                <el-container>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="fromInlineRef">
                        <el-form-item>
                            <el-input v-model="formInline.modifyName" placeholder="修改人(admin)" />
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="formInline.modifyTime" placeholder="修改时间(2023-03-05)" />
                        </el-form-item>
                    </el-form>
                    <div class="btns">
                        <el-button color="#5B6BE8" :dark="isDark" @click="getData">查询</el-button>
                        <el-button color="#5B6BE8" :dark="isDark" plain @click="reset">重置</el-button>
                        <el-button color="#5B6BE8" :dark="isDark" plain @click="deriveExcel()">
                            <el-icon>
                                <Download />
                            </el-icon>
                            导出
                        </el-button>
                    </div>
                    <el-drawer v-model="drawer3" title="更新采购信息" :direction="direction" :before-close="handleClose">
                        <el-form  :model="formInline" class="demo-form-inline">
                            <el-form-item label="药品名称">
                                <el-input v-model="formInline.pname" disabled />
                            </el-form-item>
                            <el-form-item label="修改人">
                                <el-input v-model="formInline.modifyName" disabled/>
                            </el-form-item>
                            <el-form-item label="是否出售">
                                <el-input v-model="formInline.ifShow" placeholder="是1  否2" />
                            </el-form-item>
                            <el-form-item label="是否为处方药">
                                <el-input v-model="formInline.ifOtc" placeholder="是1  否2" />
                            </el-form-item>
                            <el-form-item label="修改时间">
                                <el-date-picker v-model="formInline.modifyTime" type="date" placeholder="选择时间"
                                    format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div style="flex: auto">
                                <el-button @click="cancelClick">取消</el-button>
                                <el-button type="primary" @click="confirmClick3">提交</el-button>
                            </div>
                        </template>
                    </el-drawer>
                </el-container>
            </el-header>
            <!-- 数据 -->
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table :data="tableData" style="width: 100%; text-align: start;" empty-text="暂无数据"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table" border>
                            <el-table-column fixed prop="id" label="ID" width="100px" />
                            <el-table-column prop="pname" label="药品名称" show-overflow-tooltip />
                            <el-table-column prop="pprice" label="药品原价" show-overflow-tooltip />
                            <el-table-column prop="suggestPrice" label="药品售价" show-overflow-tooltip />
                            <el-table-column prop="pcount" label="库存数量" show-overflow-tooltip />
                            <el-table-column prop="ifShow" label="是否出售" show-overflow-tooltip />
                            <el-table-column prop="ifOtc" label="是否为处方药" show-overflow-tooltip />
                            <el-table-column prop="modifyName" label="修改人" show-overflow-tooltip />
                            <el-table-column prop="modifyTime" label="修改时间" show-overflow-tooltip />
                            <el-table-column fixed="right" label="操作" show-overflow-tooltip>
                                <template #default="a">
                                    <el-button type="primary" @click="update(a.row)">
                                        修改
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-container>

                </div>
            </el-main>
        </el-container>
    </div>


</template>

<script>
    import * as XLSX from 'xlsx'
    import { ElMessage } from 'element-plus'
    import { ElMessageBox } from 'element-plus'
    export default {
        name: 'VueWithdrawal',
        data() {
            return {
                formInline: {
                    modifyName: "",
                    tranceno: "",
                    id: '',
                    modifyTime:''
                },
                tableData: [],
                drawer2: false,
                fileList: [],// excel文件列表
                excelTemplate: "添加药品Excel模板.xlsx", // Excel 模板文件名
                drawer3: false,
                drawer: false,
                direction: "rtl",
                pData: [],
                iData: []
            };
        },
        computed: {
            excelTemplateUrl() {
                return `${process.env.BASE_URL}${this.excelTemplate}`; // Excel 模板完整 URL
            },
        },
        mounted() {

        },

        methods: {
            // 重置
            reset() {
                this.formInline = {
                    iusername: "",
                    tranceno: "",
                    id: '',
                    modifyName:''
                }
                this.getData();
            },
            // 带条件查询
            getData() {
                var that = this;
                that.$http.post("sale/querySale", that.formInline)
                    .then(function (res) {
                        console.log("原始数据", res);
                        that.tableData = res.allList.map(value => {
                            value = {
                                ...value,
                                ifOtc: value.ifOtc == '0' ? '否' : '是',
                                ifShow: value.ifShow == '0' ? '否' : '是'
                            }
                            return value;
                        })
                        console.log("最终数据", that.tableData);
                    })
                    .catch(function (err) {
                        console.log("错误信息", err);
                    })
            },
            update(value) {
                this.drawer3 = true;
                this.formInline.pname = value.pname;
                this.formInline.modifyName = window.sessionStorage.getItem("username")
            },
            // 导出Excel
            deriveExcel() {
                let workbook = XLSX.utils.table_to_book(document.getElementById('table')); //需要在table上定义一个id
                try {
                    XLSX.writeFile(workbook, '提现记录表.xlsx');
                    ElMessage({
                        type: 'success',
                        message: '导出成功!'
                    });
                } catch (e) {
                    ElMessage.error('导出失败,失败信息:!')
                }
            },
            cancelClick() {
                this.drawer3 = false;
            },
            handleClose() {
                ElMessageBox.confirm('确定取消吗?')
                    .then(() => {
                        this.drawer3 = false;
                        this.formatone();
                    })
            },
            formatone() {

            },
            confirmClick3() {
                ElMessageBox.confirm("确定修改吗？")
                    .then(() => {
                        let that = this;
                        that.$http.post("sale/updateSale",that.formInline)
                        .then(function(res){
                            console.log("res",res);
                            that.tableData = res.allList;
                        })
                        .catch(function(err){

                        })
                        that.drawer3 = false;

                    })
                    .catch(() => {

                    })
            },
        },
        mounted() {
            this.getData();
        }
    };
</script>

<style lang="css" scoped>
    .btns {
        display: inline-block;
    }

    h1 {
        font-size: 30px;
        font-weight: 600;
        font-family: "微软雅黑";
        color: rgb(73, 72, 72);
        margin-bottom: 30px;
    }

    .el-main {
        padding: 0 !important;
        overflow: hidden;
    }

    .el-header {
        padding-left: 0;
        height: 37px;
    }

    .el-aside {
        overflow: hidden;
    }

    .el-form-item {
        margin-right: 10px;
    }

    .flex {
        margin-top: 20px;
    }

    /* 下方数据 */
    .bottom-header {
        height: 100%;
        overflow-y: auto;
        width: 100%;

    }

    .el-table {
        margin-top: 20px;
        box-shadow: 0 0 5px rgb(195, 206, 217);
    }

    .bar {
        border-top: 1px solid silver;
        line-height: 23px;
    }

    .el-pagination {
        float: left;
        margin-top: 10px;
    }

    .bar>span {
        margin-top: 16px;
        display: inline-block;

    }

    .bar .number {
        color: red;
    }
</style>